import $ from 'jQuery';
(function () {
    let $vue = new Vue({
        el: '.cooperation-main-hook',
        data: {
            boxs: {
                box1: {show: true, hook: '.box1-hook', lock: true, url: '', params: {}},
            },
            statistics:{
                'statisticList':{}
            },
            palletStock:[],//今天网点托盘总数
            palletStockYesterday:[],//昨日网点托盘总数
            storageName:[],//网点名称
            changeRatio:[],//变化率
            companyId:'',
        },
        methods: {
            searchForm:function(){
                var $form = $('.form-search-hook');
                var formParams = $form.serializeJson();
                IOT.getServerData(URI.STATISTIC.COOPERATION.DATA,formParams , (ret) => {
                    if (ret.code === 200) {
                        this.statistics.statisticList.length=0;
                        this.palletStock.length=0;
                        this.palletStockYesterday.length=0;
                        this.storageName.length=0;
                        this.changeRatio.length=0;
                        this.statistics = $.extend({}, this.statistics, ret.data);
                        $.each($vue.$data.statistics.statisticList,function(i,v){
                            $vue.$data.palletStock.push(v.palletStock);
                            $vue.$data.palletStockYesterday.push(v.palletStockYesterday);
                            $vue.$data.storageName.push(v.storageName);
                            $vue.$data.changeRatio.push(v.changeRatio);
                        });
                        this.drawLine();
                    } else {
                        IOT.tips(ret.message || '服务器请求失败，稍后再试！', 'error');
                    }
                });
            },
            resetForm:function () {

                IOT.getServerData(URI.STATISTIC.COOPERATION.DATA, {}, (ret) => {
                    if (ret.code === 200) {
                        this.statistics.statisticList.length=0;
                        this.palletStock.length=0;
                        this.palletStockYesterday.length=0;
                        this.storageName.length=0;
                        this.changeRatio.length=0;
                        this.statistics = $.extend({}, this.statistics, ret.data);
                        $.each($vue.$data.statistics.statisticList,function(i,v){
                            $vue.$data.palletStock.push(v.palletStock);
                            $vue.$data.palletStockYesterday.push(v.palletStockYesterday);
                            $vue.$data.storageName.push(v.storageName);
                            $vue.$data.changeRatio.push(v.changeRatio)
                        });
                        this.drawLine();
                    } else {
                        IOT.tips(ret.message || '服务器请求失败，稍后再试！', 'error');
                    }
                });
            },
            emitPage: function () {
                M.Page.load(this.boxs);
            },
            // 上一页
            prePage: function () {
                M.Page.prePage(this.boxs);
            },
            // 触发刷新页(当前显示的页面)
            refreshPage: function () {
                M.Page.refreshPage(this.boxs);
            },
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('myChart'));
                // 绘制图表
                myChart.setOption({
                    title : {
                        text: '网点变量统计',
                        subtext: '',
                        x:'left'
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter:function (params) {
                            if($("#todDate").val() ==""){
                                var todDay = new Date();
                                var stringTime =todDay.Format('yyyy-MM-dd');
                            }else {
                                var stringTime =$("#todDate").val();
                            }
                            function getBeforeDay(d){
                                d = new Date(d);
                                d = +d - 1000*60*60*24;
                                d = new Date(d);
                                var y = d.getFullYear();
                                var m = d.getMonth() + 1;
                                m = m < 10 ? '0' + m : m;
                                var t = d.getDate();
                                t = t < 10 ? ('0' + t) : t;
                                return y + '-' + m + '-' + t;
                            }
                            var yt =getBeforeDay(stringTime);

                            var str =yt + '</br>';
                             str += '网点存量托盘总数：' + $vue.$data.palletStockYesterday[params[0].dataIndex]+ '</br>';
                            str +=  stringTime + '</br>';
                            str+=  '网点存量托盘总数：'+ $vue.$data.palletStock[params[0].dataIndex] + '</br>';
                            str += '变量百分比：'+ $vue.$data.changeRatio[params[0].dataIndex] + '%';
                            return str;
                        }
                    },
                    legend: {
                        data:['前一日网点托盘总数','当前日期网点托盘总数']
                    },
                    grid: { // 控制图的大小，调整下面这些值就可以，
                        y2: 110,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
                    },
                    xAxis : [
                        {
                            type : 'category',
                            name:'网点',
                            nameTextStyle:{
                                color:'#000',
                                fontSize:'16',
                            },
                            data : this.storageName,
                            axisLabel : {//坐标轴刻度标签的相关设置。
                                interval:0,
                                formatter : function(params){
                                    var newParamsName = "";// 最终拼接成的字符串
                                    var paramsNameNumber = params.length;// 实际标签的个数
                                    var provideNumber = 8;// 每行能显示的字的个数
                                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                                    /**
                                     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                                     */
                                    // 条件等同于rowNumber>1
                                    if (paramsNameNumber > provideNumber) {
                                        /** 循环每一行,p表示行 */
                                        for (var p = 0; p < rowNumber; p++) {
                                            var tempStr = "";// 表示每一次截取的字符串
                                            var start = p * provideNumber;// 开始截取的位置
                                            var end = start + provideNumber;// 结束截取的位置
                                            // 此处特殊处理最后一行的索引值
                                            if (p == rowNumber -1) {
                                                // 最后一次不换行
                                                tempStr = params.substring(start, paramsNameNumber);
                                            } else {
                                                // 每一次拼接字符串并换行
                                                tempStr = params.substring(start, end) + "\n";
                                            }
                                            newParamsName += tempStr;// 最终拼成的字符串
                                        }
                                    } else {
                                        // 将旧标签的值赋给新标签
                                        newParamsName = params;
                                    }
                                    //将最终的字符串返回
                                    return newParamsName
                                }
                            }
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            axisLabel: { //刻度配置
                                formatter: '{value} 块',
                            },
                        }
                    ],
                    series : [
                        {
                            name:'前一日网点托盘总数',
                            type:'bar',
                            data:this.palletStockYesterday
                        },
                        {
                            name:'当前日期网点托盘总数',
                            type:'bar',
                            data:this.palletStock,
                        }
                    ]
                });
                window.onresize = myChart.resize;
            }
        },
        created: function () {
            IOT.getServerData(URI.STATISTIC.COOPERATION.DATA, {}, (ret) => {
                if (ret.code === 200) {
                    this.statistics = $.extend({}, this.statistics, ret.data);
                    $.each($vue.$data.statistics.statisticList,function(i,v){
                        $vue.$data.palletStock.push(v.palletStock);
                        $vue.$data.palletStockYesterday.push(v.palletStockYesterday);
                        $vue.$data.storageName.push(v.storageName);
                        $vue.$data.changeRatio.push(v.changeRatio)
                    });
                    this.drawLine();
                } else {
                    IOT.tips(ret.message || '服务器请求失败，稍后再试！', 'error');
                }
            });
        },
        mounted: function () {
            this.drawLine();
            this.$nextTick(() => {
                var $accountBox = $('.cooperation-hook');
                $accountBox.find('.area-hook').selectpicker({width: '120px'});
                $accountBox.find('.cooperation-status-hook').selectpicker({width: '80px'});
                // 查询
                var todDay = new Date();
                $('#todDate').val(todDay.Format('yyyy-MM-dd'));
                $accountBox.find('#todDate').datetimepicker({
                    width: '320px',
                    format: 'Y-m-d',
                    formatDate: 'Y-m-d',
                    maxDate:todDay,
                    scrollMonth: false,
                    scrollTime: false,
                    scrollInput: false,
                    timepicker: false // 关闭时间选项
                });
                let tableHookName = '.performance-table-hook';
            });
        }
    });
})();